<template>
	<view @click="itemClick" class="baseView" :style="`width: ${getWidth(false)}px;height: ${getWidth(false)}px;`">
		<image  class="zsImage" :src="dataModel.imageUrl"  :style="`width: ${getWidth(true)}px;height: ${getWidth(true)}px;`" mode="aspectFill"></image>
	</view>
</template>

<script>
	export default {
		props: {
			dataModel:{},
			column:{
				type:Number,
				default:3
			}
		},
		name: "gif-image-cell",
		data() {
			return {
				screenWidth:null
			};
		},
		methods: {
			getWidth(isItem) {
				if(this.screenWidth == null){
					this.screenWidth = uni.getSystemInfoSync().windowWidth;
				}
				var imageWidth = (this.screenWidth - 20) / this.column;
				if(isItem){
					imageWidth -=3;
				}
				// console.log('屏幕宽度2:', imageWidth);
				return imageWidth
			},
			itemClick(){
				console.log('itemClick');
			}
		},

	}
</script>

<style lang="scss" scoped>
	.baseView {
		margin-bottom: 1px;
        border-radius: 4px;
		overflow: hidden;
	}
	.zsImage{
		border-radius: 4px;
		overflow: hidden;
	}
</style>